/* eslint-disable react/jsx-pascal-case */
import { useEffect, useRef, } from 'react';
import { 地块 } from './地块类';
import style from './index.module.scss';
import d1 from './地块类/地块文件/01.json';
import d2 from './地块类/地块文件/02.json';
import d3 from './地块类/地块文件/03.json';
import d4 from './地块类/地块文件/04.json';
import d5 from './地块类/地块文件/05.json';
import d6 from './地块类/地块文件/06.json';
import d7 from './地块类/地块文件/07.json';
import d8 from './地块类/地块文件/08.json';
import d9 from './地块类/地块文件/09.json';
import d10 from './地块类/地块文件/10.json';
import d11 from './地块类/地块文件/11.json';
import d12 from './地块类/地块文件/12.json';
import d13 from './地块类/地块文件/13.json';
import d14 from './地块类/地块文件/14.json';
import d15 from './地块类/地块文件/15.json';
import d16 from './地块类/地块文件/16.json';
import d17 from './地块类/地块文件/17.json';
import d18 from './地块类/地块文件/18.json';
import d19 from './地块类/地块文件/19.json';
const bgsrc = require('../image/bgblack.jpg')
// const testarr = JSON.parse(test)
const 游戏场景UI = () => {
    const gameRef: any = useRef("")
    useEffect(() => {
        const canvas: HTMLCanvasElement = gameRef.current
        const ctx = canvas.getContext('2d')!

        const bgimg = new Image()
        bgimg.src = bgsrc
        bgimg.onload = () => {

            const ptrn = ctx.createPattern(bgimg, 'repeat')!
            // ctx.drawImage(bgimg, 0, 0, canvas.width, canvas.height)
            ctx.fillStyle = ptrn
            ctx.strokeStyle = ptrn
            ctx.lineWidth = 30
            // ctx.fillRect(0,0,canvas.width,canvas.height)
            new 地块('亶洲', d1)
            new 地块('夷洲', d2)
            new 地块('邓林', d3)
            new 地块('太行', d4)
            new 地块('巫山', d5)
            new 地块('洛水', d6)
            new 地块('蜀山', d7)
            new 地块('云梦泽', d8)
            new 地块('瀛洲', d9)
            new 地块('雨山', d10)
            new 地块('穷桑', d11)
            new 地块('幽都', d12)
            new 地块('苍梧', d13)
            new 地块('雷泽', d14)
            new 地块('宛丘', d15)
            new 地块('姜水', d16)
            new 地块('帝丘', d17)
            new 地块('扶桑', d18)
            new 地块('不周山', d19)
            地块.group.forEach(item => {
                item.darw(ctx)
            })
            canvas.onmousemove = (e: MouseEvent) => {
                const x = e.offsetX
                const y = e.offsetY


                地块.group.forEach(item => {
                    if (item.ml < x && item.mr > x && item.mt < y && item.mb > y) 
                    {

                        item.onhover(ctx)
                    } else {
                        item.onout(ctx, ptrn)
                    }

                    })
                }
    }
            

    


    }, [])

return (
    <canvas width={6900} height={3600} ref={gameRef} className={style.box} >
        demo
    </canvas>
)
}


export default function 游戏场景() {
    return (
        <游戏场景UI />

    )
}